<template>
  <div>
    <OverflowTooltip content="太短,不省略" width="200px" placement="bottom-start" effect="light"
      popper-class="custom-tooltip" />
    <OverflowTooltip content="这是一段非常非常非常非常非常非常非常非常非常非常长的文本" width="200px" placement="bottom-start" effect="light"
      popper-class="custom-tooltip" />

    <h3>使用插槽和自定义样式</h3>
    <OverflowTooltip width="200px" class="custom-container" style="font-weight: bold;" transition="el-fade-in-linear">
      <span style="color: blue;">这是一段带样式的非常非常非常非常非常非常非常非常非常非常长的文本</span>
    </OverflowTooltip>

    <h3>完全继承 Tooltip 属性</h3>
    <OverflowTooltip content="这段文字很长" width="150px" :offset="10" :show-after="500" :hide-after="200" />
  </div>
</template>
<script setup>
import OverflowTooltip from '@/components/OverflowTooltip/OverflowTooltip.vue'
</script>